<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        width: 200px;
        height: 200px;
        margin-left: 10px;
    }
</style>

<body>
    <input style="" type="file" multiple placeholder="请上传jpg，png，gif图片">
    <button class="bu">上传</button>
    <button class="but">删除</button>
    <div></div>
    <script src="../jquery.js"></script>
    <script src="../axios.min.js"></script>
    <script>
        let formdata;
        let arr = []
        $('input[type=file]').change(() => {
            let vl = $('input[type=file]')[0].files;
            for (i = 0; i < vl.length; i++) {
                let pic = $('input[type=file]')[0].files[i];
                arr.push(pic)
                let read = new FileReader;
                read.onload = function () {
                    $('div').append(`<img src="${read.result}" alt="">`)
                };
                read.readAsDataURL(pic);

            }
            // console.log(formdata);
        })
        $('.bu').click(() => {
            for (let i in arr) {
                var formdata = new FormData;
                formdata.append('img', arr[i])
                axios.post(
                    'http://localhost:7003/img',
                    formdata,
                    // $('input[type=file]')[0].files[0],
                    // formdata.getAll('key')[i],
                    // {data:'woshishisishi'}
                    { 'Content-type': 'multipart/from-data' }
                ).then((res) => {
                    console.log(res.data);
                })
            }
        })
        $('.but').click(() => {
            axios.post(
                'http://localhost:7003/imgs',
            ).then((res) => {
                let set = setInterval(() => {
                    let zi = $("div").children()[0];
                    if (zi) {
                        zi.remove()
                    } else {
                        clearInterval(set)
                    }
                }, 100);
                arr = []
                console.log(res.data);
            })
        })
    </script>
</body>

</html>